<template>
  <div style="width: 100%; padding: 0 20px">
    <div class="title">基本信息</div>
    <zh-form
        :span="6"
        ref="ancientDevManagerForm1"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        :model="formData1"
    >
      <zh-row style="width: 100%">
        <zh-input
            prop="h1702"
            type="text"
            label="阶段任务名称"
            :span="12"
            v-model="formData1.h1702"
            :disabled="disabled"
        ></zh-input>
      </zh-row>
      <zh-row style="width: 100%">
        <zh-input
            prop="h1703"
            type="date"
            format="YYYY-MM-DD"
            v-model="formData1.h1703"
            label="开始日期"
            :disabled="disabled"
        />
        <zh-input
            prop="h1704"
            type="date"
            format="YYYY-MM-DD"
            v-model="formData1.h1704"
            label="计划完成日期"
            :disabled="disabled"
        />
        <zh-input
            prop="h1705"
            type="select"
            :options="dictData.H1705"
            :defaultFields="{ label: 'dictValue', value: 'dictKey' }"
            label="任务状态"
            v-model="formData1.h1705"
            :disabled="disabled"
        ></zh-input>
        <zh-input
            prop="h1706"
            type="select"
            :options="dictData.H1706"
            :defaultFields="{ label: 'dictValue', value: 'dictKey' }"
            label="进度"
            v-model="formData1.h1706"
            :disabled="disabled"
        ></zh-input>
      </zh-row>
    </zh-form>
    <div class="title">简介</div>
    <a-textarea style="margin: 10px 0px"
        v-model="formData1.h1707"
        :disabled="disabled"
        :rows="3"
    />
    <div class="title">多媒体</div>
    <div style="width: 100%;display: block">
      <div style="text-align: right;width: 100%">
        <ep-button
            icon="add.svg"
            size="small"
            type="primary"
            @click="addMediaInfo"
            :disabled="disabled"
        >添加
        </ep-button>
      </div>
      <div>
        <ul class="media-wrap">
          <li v-for="(item, index) in h18VOList" :key="index">
            <div class="item special">
              <div class="desc">序号</div>
              <p>{{ item.b0207 }}</p>
            </div>
            <div class="item">
              <div class="desc">名称</div>
              <p>{{ item.b0203 }}</p>
            </div>
            <div class="item">
              <div class="desc">媒体类型</div>
              <p>{{ item.b0202Name }}</p>
            </div>
            <div class="item">
              <div class="desc">缩略图</div>
              <template v-if="item.b0202Name === '图片'">
                <img
                    v-if="item.b0205"
                    :src="fileShowUrl + item.b0205"
                    @click="checkImg(item.b0205)"
                    alt=""
                />
              </template>
              <template v-else>
                <img
                    v-if="item.b0206"
                    :src="fileShowUrl + item.b0206"
                    @click="checkImg(item.b0206)"
                    alt=""
                />
              </template>
            </div>

            <div class="item">
              <div class="desc"></div>
              <div class="btn-wrap">
                <ep-button
                    size="small"
                    icon="edit.svg"
                    @click="editMediaInfo(item, index)"
                    :disabled="disabled"
                >编辑
                </ep-button>
                <ep-button
                    size="small"
                    type="danger"
                    icon="del.svg"
                    @click="deleteMediaInfo(index)"
                    :disabled="disabled"
                >删除
                </ep-button>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <a-modal
        :title="modalTitle"
        centered
        style="top: 20px"
        width="50%"
        destroyOnClose
        v-model="visible"
        cancelText="关闭"
        okText="保存"
        @ok="handleForm"
    >
      <mediaInfoItem ref="mediaInfoItem"/>
    </a-modal>
  </div>
</template>

<script>
import mediaInfoItem from "@/pages/system/form/mediaInfoItem";
import {fileShowUrl, getBatchDict} from "@/services/system/api";
import {getAncientDevDetail} from "@/services/system/whdngxlApi"
import modal from "ant-design-vue/lib/modal";

function isDuringDate(beginDateStr,endDateStr) {
  var curDate = new Date(),
      beginDate = new Date(beginDateStr),
      endDate = new Date(endDateStr);
  if(curDate >= beginDate && curDate < endDate){
    return true;
  }
  return false;
}

export default {
  name: "ancientDevManagerForm",
  components: {
    mediaInfoItem,
  },
  data() {
    return {
      dictData: {},
      labelCol: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      formData1: {
        h1701: undefined,
        h1702: undefined,
        h1703: undefined,
        h1704: undefined,
        h1705: undefined,
        h1706: undefined,
        h1707: undefined,
      },
      h18VOList: [],
      orgId: '',
      mediaInfoList: [],
      modalTitle: '',
      visible: false,
      fileShowUrl,
      mediaFieldRuleTo: {
        h1701: 'h1701',
        b0201: 'h1801',
        b0203: 'h1802',
        b0202: 'h1803',
        b0206: 'h1804',
        b0205: 'h1805',
        b0207: 'h1806',
        flag: 'flag'
      },
      mediaFieldRuleFrom: {
        h1801: 'b0201',
        h1701: 'h1701',
        h1802: 'b0203',
        h1803: 'b0202',
        h1804: 'b0206',
        h1805: 'b0205',
        h1806: 'b0207'
      },
      h18VOListForEdit: [],
      h18VOListForDel: [],
      disabled: false
    }
  },
  created() {
    this.$http.post(getBatchDict, {dictFields: 'H1705,H1706'}).then(res => {
      this.dictData = res.result;
    });
  },
  methods: {
    init(h1701,disabled) {
      if(disabled){
        this.disabled = true
      }
      this.$http.post(getAncientDevDetail, {h1701: h1701}).then((res) => {
        this.formData1 = res.result
        const h18VOList = res.result.h18VOList
        for (const item of h18VOList) {
          const mediaInfo = {}
          for (const itemKey in item) {
            if (itemKey === 'h1803') {
              if (item[itemKey] === '1') {
                mediaInfo.b0202Name = '图片'
              }
            }
            if (this.mediaFieldRuleFrom[itemKey]) {
              mediaInfo[this.mediaFieldRuleFrom[itemKey]] = item[itemKey]
            }
          }
          this.h18VOList.push(mediaInfo)
        }
      })
    },
    //新增
    addMediaInfo() {
      this.modalTitle = "新增";
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.mediaInfoItem.editFlag = false
        this.getListSize(this.h18VOList);
        this.$refs.mediaInfoItem.b0207Num = this.b0207Num;
        this.$refs.mediaInfoItem.init(null);
      });
    },
    //编辑
    editMediaInfo(row, index) {
      this.modalTitle = "编辑";
      this.editIndex = index;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.mediaInfoItem.editFlag = false
        if (row.b0201) {
          row.flag = "edit";
        }
        this.$refs.mediaInfoItem.init(row);
      });
    },
    deleteMediaInfo(index) {
      modal.confirm({
        title: "确认删除吗？",
        onOk: () => {
          if (this.h18VOList[index].b0201) {
            const item = JSON.parse(JSON.stringify(this.h18VOList[index]));
            item.flag = "delete";
            this.h18VOListForDel.push(item);
          }
          this.h18VOList.splice(index, 1);
        },
        onCancel: () => {
        },
      });
    },
    //确定
    handleForm() {
      var mediaInfoItem = this.$refs.mediaInfoItem.mediaInfoItem;
      if (this.modalTitle === "新增") {
        mediaInfoItem.flag = "save";
        this.h18VOList.push(mediaInfoItem);
      } else {
        if(mediaInfoItem.flag === 'edit'){
          this.h18VOListForEdit.push(mediaInfoItem)
        }
        this.h18VOList.splice(this.editIndex, 1, mediaInfoItem);
      }
      this.$nextTick(() => {
        this.visible = false;
      });
    },
    getListSize(list) {
      this.b0207Num = 0;
      list.forEach((item) => {
        if (item.b0207 > this.b0207Num) {
          this.b0207Num = item.b0207;
        }
      });
      if (this.b0207Num < list.length) {
        this.b0207Num = list.length;
      }
      this.b0207Num++;
    },
    checkImg(showId) {
      let url = this.fileShowUrl + showId;
      window.open(url, "_blank");
    },
    getData() {
      const params = {}
      params.h1701 = this.formData1.h1701
      params.h1702 = this.formData1.h1702
      params.h1703 = this.formData1.h1703
      params.h1704 = this.formData1.h1704
      params.h1705 = this.formData1.h1705
      params.h1706 = this.formData1.h1706
      params.h1707 = this.formData1.h1707

      if (this.h18VOList.length > 0) {
        const h18VOList = []
        for (let e of this.h18VOList) {
          if(!e.b0201){
            const h18VO = {}
            for (const itemKey in e) {
              if (this.mediaFieldRuleTo[itemKey]) {
                h18VO[this.mediaFieldRuleTo[itemKey]] = e[itemKey]
              }
            }
            h18VOList.push(h18VO)
          }
        }
        params.h18VOList = h18VOList
      }
      if (this.h18VOListForEdit.length > 0) {
        const h18VOListForEdit = []
        for (let e of this.h18VOListForEdit) {
          const h18VO = {}
          for (const itemKey in e) {
            if (this.mediaFieldRuleTo[itemKey]) {
              h18VO[this.mediaFieldRuleTo[itemKey]] = e[itemKey]
            }
          }
          h18VOListForEdit.push(h18VO)
        }
        params.h18VOListForEdit = h18VOListForEdit
      }
      if (this.h18VOListForDel.length > 0) {
        const h18VOListForDel = []
        for (let e of this.h18VOListForDel) {
          const h18VO = {}
          for (const itemKey in e) {
            if (this.mediaFieldRuleTo[itemKey]) {
              h18VO[this.mediaFieldRuleTo[itemKey]] = e[itemKey]
            }
          }
          h18VOListForDel.push(h18VO)
        }
        params.h18VOListForDel = h18VOListForDel
      }

      return params;


    },
  },
  watch: {
    'formData1.h1703': {
      handler() {
        if(this.formData1.h1703 !== undefined){
          //如果当前日期在设定的开始时间之前，则任务状态自动匹配【未开始】，进度匹配【正常】
          if(new Date() < new Date(this.formData1.h1703)){
            this.formData1.h1705 = '00'
            this.formData1.h1706 = '01'
          }else {
            //如果当前日期在设定的开始时间和计划完成日期之间，则任务状态自动匹配【进行中】，进度匹配【正常】
            if(this.formData1.h1704 !== undefined){
              const flag = isDuringDate(this.formData1.h1703,this.formData1.h1704)
              if(flag){
                this.formData1.h1705 = '01'
                this.formData1.h1706 = '01'
              }
            }
          }
        }
      },
      immediate: true,
      deep: true
    },
    'formData1.h1704': {
      handler() {
        if(this.formData1.h1704 !== undefined){
          //如果当前日期已经到了计划完成日期之后，则任务状态自动匹配【已完成】，进度匹配【正常】
          if(new Date() > new Date(this.formData1.h1704)){
            this.formData1.h1705 = '02'
            this.formData1.h1706 = '01'
          }else {
            //如果当前日期在设定的开始时间和计划完成日期之间，则任务状态自动匹配【进行中】，进度匹配【正常】
            if(this.formData1.h1703 !== undefined){
              const flag = isDuringDate(this.formData1.h1703,this.formData1.h1704)
              if(flag){
                this.formData1.h1705 = '01'
                this.formData1.h1706 = '01'
              }
            }
          }
        }
      },
      immediate: true,
      deep: true
    },
    'formData1.h1705': {
      handler(newValue,oldValue) {
        console.log(newValue)
        console.log(oldValue)
        if(newValue !== undefined){
          //已完成->进行中  滞后
          if(oldValue === '02' && newValue === '01'){
            this.formData1.h1706 = '02'
            return
          }
          //进行中->已完成 超前
          if(oldValue === '01' && newValue === '02'){
            this.formData1.h1706 = '00'
            return
          }
        }
      },
      immediate: true,
      deep: true
    },
  }
}
</script>

<style lang="less" scoped>
.title {
  display: inline-block;
  border: 1px solid;
  text-align: center;
  color: #2466d0;
  box-sizing: border-box;
  border-radius: 5px;
  font-weight: bold;
  line-height: 30px;
  font-size: 20px;
  padding: 0px 8px;

  &.divDisPlay {
    display: block;
  }
}

.operate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 10px;


  > div {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }


}

.media-wrap {
  margin-top: 15px;

  li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 15px;

    .item {
      flex: 0 0 auto;
      width: 18%;

      .desc {
        width: 100%;
        height: 21px;
        line-height: 21px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      p {
        width: 100%;
        height: 32px;
        line-height: 30px;
        padding: 0 10px;
        border: 1px solid #3e9fc8;
        border-radius: 4px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .btn-wrap {
        text-align: center;
      }

      img {
        width: auto;
        height: 90px;
        max-width: 98%;
        vertical-align: middle;
        cursor: pointer;
      }

      &.special {
        width: 5%;
      }
    }
  }
}
</style>